<template>
<div class="container">
    <!-- 列表 -->
    <div class="liebiao">
        <div v-for="(item) in tableData" :key="item.id" class="sousuo" :class="{'isActive':item.id==activeId}" @click="goDetail(item.id)">
            <span class="first">{{item.title}}</span>
            <!--
        <span class="second">{{item.date}}</span>
        -->
        </div>
    </div>
    <!-- 分页 -->
    <Pagination :total="total" :params="params" :get="get" v-if="total>10"></Pagination>
    <div class="no-list" v-if="tableData.length===0">暂无数据</div>
    <!-- 举报按钮 -->
    <div class="box" @click="goReportOnInternet">我要举报</div>
</div>
</template>

<script>
import Pagination from "@/components/common/Pagination.vue";
export default {
    components: {
        Pagination
    },
    data() {
        return {
            //法律法规请求参数
            params: {
                pageNum: 1,
                pageSize: 10
            },
            tableData: [],
            total: 0,
            //---------------------
            pageSize: 10,
            currentPage: 1,
            activeId: 1,
        };
    },
    created() {
        this.get();
    },
    methods: {
        //获取法律法规列表
        get() {
            this.Api.getLawList(this.params).then((res) => {
                if (res.code === "0") {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    // console.log(this.tableData, "获取法律法规列表");
                    // console.log(typeof( this.total))
                }
            });
        },
        //路由跳转详情页
        goDetail(id) {
            // this.$router.push("/Jd");
            this.$router.push({
                name: "Jd",
                query: {
                    id: id
                }
            });
        },
        //数据条数发生变化
        handleSizeChange(newSize) {
            this.pagesize = newSize;
        },
        //翻页触发
        handleCurrentChange(currPage) {
            this.pagenum = currPage;
        },
        goReportOnInternet() {
            // console.log(123);
            this.$router.push("/ReportOnInternet");
        },
    },
};
</script>

<style lang="less" scoped>
.sousuo {
    cursor: pointer;
    width: 100%;
    height: 74px;
    border-bottom: 1px solid #e8e8e8;
    line-height: 74px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

span:hover {
    color: red;
}

.second {
    color: #999999;
}

.first {
    color: #333333;
    font-size: 16px;
}

.container {
    padding: 35px 40px;
}

/deep/.el-pagination {
    white-space: nowrap;
    padding: 55px 0px 76px 0px;
    color: #303133;
    font-weight: 700;
}

.box {
    width: 234px;
    height: 52px;
    background: rgba(20, 123, 253, 1);
    box-shadow: 0px 4px 12px 0px rgba(20, 123, 253, 0.6);
    border-radius: 5px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    line-height: 52px;
    cursor: pointer;
    margin-top: 76px;
}

.no-list {
    padding: 20px 0;
    text-align: center;
}
</style>
